.wrap {
    margin: 200px 400px;
    position: relative;
}

.cube {
    margin: 0 auto;
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    animation: active 20s infinite linear;
}

.cube div {
    position: absolute;
    height: 300px;
    width: 300px;
    opacity: 0.8;
    transition: all .4s;
}

@keyframes active{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}

.cube .pic {
    height: 300px;
    width: 300px;
}

.cube .out_front {
    transform: rotateY(0deg) translateZ(150px);
}

.cube .out_back {
    transform: translateZ(-150px) rotateY(180deg);
}

.cube .out_left {
    transform: rotateY(90deg) translateZ(150px);
}

.cube .out_right {
    transform: rotateY(-90deg) translateZ(150px);
}

.cube .out_top {
    transform: rotateX(90deg) translateZ(150px);
}

.cube .out_bottom {
    transform: rotateX(-90deg) translateZ(150px);
}

.cube span{
	display: block;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 200px;
	height: 200px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .in_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}

.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(400px);
}
.cube:hover .out_back{
	transform: translateZ(-400px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(400px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(400px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(400px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(400px);
}